<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <style>
        .bg {
            width: 1000px;
            margin: 0 auto;
            /* border: 1px solid black; */
            /* height: 1000px; */
        }

        * {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            height: 30px;
            padding: 10px;
            line-height: 30px;
            vertical-align: middle;
            position: relative;
            border-bottom: #efefef 1px solid;
            margin-bottom: -1px;
        }

        li span {
            display: block;
            float: left;
            height: 30px;
            
        }

        li span img {
            height: 30px;
            width: 30px;
        }
        .s2{
            position: absolute;
            padding: 4px;
            left: 60px;
        }
        .s2 span{
            color: #b5b5b5;
            font-size: 12px;
        }
        .s2 .reply{
            font-size: 14px;
            color: #9e78c0;
        }
        .s3{
            position: absolute;
            left: 140px;
            font-size: 12px;
            padding:4px;
            border-radius: 4px;
            height: 12px;
            margin-top: 8px;
            line-height: 15px;
        }
        .s4{
            margin-top: 3px;
            position: absolute;
            left: 180px;
            color: #333;
            font-size: 16px;
            width: 600px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .s5{
            width: 90px;
            position: absolute;
            left: 900px;
            color: #778087;
            font-size: 12px;
            margin-top: 3px;
            text-align: right;
        }
        .top{
            background: #80bd01;
            color: #fff;
        }
        .tab{
            background-color: #e5e5e5;
            color: #999
        }
    </style>
</head>

<body>
    <div class="bg">
        <ul>
        </ul>
    </div>
    <script>
        let xhr = new XMLHttpRequest();
        let ul = document.querySelector('ul')
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                // console.log(xhr.responseText);
                var data = JSON.parse(xhr.responseText);
                console.log(data);
                for (let i = 0; i < data.data.length; i++) {
                    ul.innerHTML += `<li>
                    <span class ='s1'><img src="${data.data[i].author.avatar_url}" alt=""></span>
                    <span class ='s2'><span class='reply'>${data.data[i].reply_count}</span>  <span>/${data.data[i].visit_count}</span></span>
                    <span class ='s3' top = "${data.data[i].top}" tab ="${data.data[i].tab}">..</span>
                    <span class ='s4'>${data.data[i].title}</span>
                    <span class ='s5' replyTime ="${data.data[i].last_reply_at}"></span>
                    
                    </li>
                    `
                    let s3 = document.querySelectorAll('li .s3')
                    if (s3[i].getAttribute('top') =='true') {
                        s3[i].classList.add('top')
                        s3[i].innerText ='置顶'
                    }else{
                        if (s3[i].getAttribute('tab') == 'share') {
                            s3[i].classList.add('tab')
                            s3[i].innerText ='分享'
                        }else{
                            s3[i].classList.add('tab')
                            s3[i].innerText ='问答'
                        }
                    }
                    let s5 = document.querySelectorAll('.s5');
                    let now =new Date();
                    
                    let replyTime = new Date(s5[i].getAttribute('replyTime'))
                    
                    s5[i].innerText = Math.floor((now.getTime() - replyTime.getTime())/(1000*3600*24)) +'天前'
                }
            }
        }

        xhr.open('get', 'https://cnodejs.org/api/v1/topics');
        xhr.send();
    </script>
</body>

</html>